<template>
    <div class="pop-sell-win">
        <el-dialog
            :visible.sync="dialogVisible"
            width="50%"
            :show-close="false"
        >
            <div slot="title" class="dialog-title">
                <div class="left-but">
                    <i
                        v-show="is_show_custom"
                        class="el-icon-arrow-left"
                        @click="is_show_custom = false"
                    ></i>
                </div>
                <div class="title-box" v-show="!is_show_custom">
                    <span>{{
                        saleType == 1
                            ? "历史销售"
                            : saleType == 2
                            ? "月度销售"
                            : "客户销售"
                    }}</span>
                </div>
                <div class="title-box" v-show="is_show_custom">
                    <span>销售详情</span>
                </div>
                <div class="right-but">
                    <i
                        v-show="!is_show_custom"
                        class="el-icon-close"
                        @click="dialogVisible = false"
                    ></i>
                </div>
            </div>
            <div class="good-info-box">
                <div class="good-info">
                    <div class="good-img">
                        <img
                            :src="goodInfo.imgs ? goodInfo.imgs[0] : img_buf"
                        />
                    </div>
                    <div class="good-content">
                        <div class="good-title">
                            <span>{{ goodInfo.title }}</span>
                        </div>
                        <div class="good-txt">
                            <span>{{
                                goodInfo.gd_brand
                                    ? goodInfo.gd_brand
                                    : `${
                                          goodInfo.brands_title
                                              ? goodInfo.brands_title + "|"
                                              : ""
                                      }${
                                          goodInfo.cat_title
                                              ? goodInfo.cat_title + "|"
                                              : ""
                                      }${
                                          goodInfo.item_no
                                              ? goodInfo.item_no
                                              : ""
                                      }`
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sale-data-box">
                <div class="sale-h" v-show="!is_show_custom">
                    <div class="sale-h-1">
                        <span>{{
                            saleType == 1
                                ? "日期"
                                : saleType == 2
                                ? "月份"
                                : "客户"
                        }}</span>
                    </div>
                    <div class="sale-h-2" v-if="saleType == 2">
                        <span>占比</span>
                    </div>
                    <div class="sale-h-3">
                        <span>{{
                            saleType == 1
                                ? "销售数量"
                                : saleType == 2
                                ? "金额"
                                : "累计金额"
                        }}</span>
                    </div>
                </div>
                <div class="sale-body comm-list" v-show="!is_show_custom">
                    <div
                        class="sale-row"
                        :class="saleType == 1 ? 'sale_is_custom' : ''"
                        v-for="(item, index) in saleList"
                        :key="index"
                        @click="getSellCustom(item)"
                    >
                        <div class="sale-b-1">
                            <span>{{
                                saleType == 3 ? item.cname : item.timestr
                            }}</span>
                        </div>
                        <div class="sale-b-2" v-if="saleType == 2">
                            <span>{{ item.zb }}</span>
                        </div>
                        <div class="sale-b-3">
                            <span>{{
                                saleType == 1 ? item.number : item.amount
                            }}</span>
                            <i
                                v-if="saleType == 1"
                                class="el-icon-arrow-right"
                            ></i>
                        </div>
                    </div>
                </div>
                <div class="sale-body comm-list" v-show="is_show_custom">
                    <div
                        class="costom-row"
                        v-for="(item, index) in customList"
                        :key="index"
                    >
                        <div class="costom-info">
                            <div class="title">销售日期</div>
                            <div class="data">{{ tiem_sell }}</div>
                        </div>
                        <div class="costom-info" v-if="item.customer">
                            <div class="title">客户信息</div>
                            <div class="data">{{ item.customer }}</div>
                        </div>
                        <div class="costom-info" v-if="item.spec">
                            <div class="title">产品规格</div>
                            <div class="data">{{ item.spec }}</div>
                        </div>
                        <div class="costom-info" v-if="item.num">
                            <div class="title">销售数量</div>
                            <div class="data">{{ item.num }}</div>
                        </div>
                        <div class="costom-info" v-if="item.price">
                            <div class="title">销售单价</div>
                            <div class="data">{{ item.price }}</div>
                        </div>
                        <div class="costom-info" v-if="item.amount">
                            <div class="title">销售总额</div>
                            <div class="data">{{ item.amount }}</div>
                        </div>
                        <div class="costom-info" v-if="item.time_send">
                            <div class="title">出库时间</div>
                            <div class="data">{{ item.time_send }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";

export default {
    name: "popsellWin",
    props: ["goodInfo"],
    data() {
        return {
            dialogVisible: false,
            is_show_custom: false,
            saleType: "",
            saleList: [],
            img_buf: staticConst.GOOD_IMG,
            customList: [],
            tiem_sell: "",
            popsellData: {},
        };
    },
    methods: {
        initData(data) {
            this.popsellData = data;
            this.saleType = data.type;
            this.getsaleDataFun();
        },

        async getsaleDataFun() {
            this.is_show_custom = false;
            let url = this.popsellData.list_api;
            let param = {
                gdid: this.goodInfo.id,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.saleList = res.data.sell_ls || [];
                this.dialogVisible = true;
            }
        },
        async getSellCustom(item) {
            if (this.saleType != 1) return;
            this.tiem_sell = item.timestr;
            let url = this.popsellData.custom_api;
            let param = {
                time: item.timestr,
                gdid: this.goodInfo.id,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.customList = res.data.od_gd_info || res.data || [];
                this.is_show_custom = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>

.good-info-box {
    .good-info {
        display: flex;
        .good-img {
            margin-right: 10px;
            width: 80px;
            height: 80px;
            border-radius: 5px;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .good-content {
            .good-title {
                font-size: 14px;
            }
            .good-txt {
                margin-top: 10px;
                font-size: 12px;
                color: #9fa0a8;
            }
        }
    }
}
.sale-data-box {
    margin-top: 20px;
    .sale-h {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background: #f2f2f2;
        .sale-h-1 {
            flex: 1;
            text-align: left;
        }
        .sale-h-2 {
            flex: 1;
            text-align: center;
        }
        .sale-h-3 {
            flex: 1;
            text-align: right;
        }
    }
    .sale-body {
        height: 400px;
        overflow: auto;
        .sale-row {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            border-bottom: 1px #f3f3f3 solid;
            &.sale_is_custom {
                cursor: pointer;
                &:hover {
                    background: #fbf8f8;
                }
            }

            .sale-b-1 {
                flex: 1;
                text-align: left;
            }
            .sale-b-2 {
                flex: 1;
                text-align: center;
            }
            .sale-b-3 {
                flex: 1;
                text-align: right;
            }
        }
        .costom-row {
            border-bottom: 2px #f3f3f3 solid;
            padding-bottom: 10px;
            margin-bottom: 10px;
            &:last-child {
                border: none;
            }
            .costom-info {
                height: 40px;
                display: flex;
                align-items: center;
                font-size: 14px;
                .title {
                    width: 90px;
                }
                .data {
                    color: #797979;
                }
            }
        }
    }
}
</style>